<template>
  <div class="strategy-log-container">
    <el-table v-loading="loading" :data="tableData" style="width: 100%" border>
      <el-table-column prop="id" label="日志ID" width="80" />
      <el-table-column prop="executionTime" label="执行时间" width="180" />
      <el-table-column prop="userId" label="用户ID" width="80" />
      <el-table-column prop="databaseName" label="数据库名称" width="120" />
      <el-table-column prop="sqlStatement" label="SQL语句" show-overflow-tooltip>
        <template #default="{ row }">{{ formatSql(row.sqlStatement) }}</template>
      </el-table-column>
      <el-table-column prop="executionStatus" label="执行状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.executionStatus === 'SUCCESS' ? 'success' : 'danger'">
            {{ row.executionStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="executionDurationMs" label="执行时长(ms)" width="120" />
      <el-table-column prop="rowsReturned" label="返回行数" width="100" />
      <el-table-column label="操作" width="150" fixed="right">
        <!-- <template #default="{ row }">
          <el-button size="small" @click="viewDetail(row.id)">查看详情</el-button>
          <el-button size="small" type="primary" @click="showResult(row.id)">查看结果</el-button>
        </template> -->
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.pageIndex"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getStrategyLogs } from "@/api/strategy";
import SysAPI, { SysLogQuery, SysLogResponse, SysLog } from "@/api/strategy/sysLog";

// 表格数据
const sysLogResponse = ref<SysLogResponse>({});
const tableData = ref<SysLog[]>([]);
const loading = ref(false);

// 分页数据
const pagination = reactive<{
  total: number;
  size: number;
  pageIndex: number;
  pageSize: number;
}>({
  total: 0,
  size: 10,
  pageIndex: 1,
  pageSize: 10,
});

// 格式化SQL语句，截断显示
const formatSql = (sql: string) => {
  if (sql.length > 50) {
    return sql.substring(0, 50) + "...";
  }
  return sql;
};

// 获取日志数据
const getLogs = async () => {
  loading.value = true;
  try {
    const params: SysLogQuery = {
      pageIndex: pagination.pageIndex,
      pageSize: pagination.size,
    };
    const res = await SysAPI.SysLog(params);
    sysLogResponse.value = res;
    tableData.value = sysLogResponse.value.data || [];
    pagination.total = sysLogResponse.value.total;
    pagination.size = sysLogResponse.value.size;
    pagination.pageIndex = sysLogResponse.value.current;
    pagination.pageSize = sysLogResponse.value.size;
  } catch (error) {
    ElMessage.error("获取日志失败");
    console.error("Failed to get strategy logs:", error);
  } finally {
    loading.value = false;
  }
};

// 分页大小改变
const handleSizeChange = (size: number) => {
  pagination.size = size;
  pagination.pageIndex = 1;
  getLogs();
};

// 当前页码改变
const handleCurrentChange = (pageIndex: number) => {
  pagination.pageIndex = pageIndex;
  getLogs();
};

// 查看详情
const viewDetail = (id: number) => {
  // 实现查看详情逻辑
  ElMessage.info(`查看ID为 ${id} 的日志详情`);
};

// 查看结果
const showResult = (id: number) => {
  // 实现查看结果逻辑
  ElMessage.info(`查看ID为 ${id} 的执行结果`);
};

// 初始加载数据
onMounted(() => {
  getLogs();
});
</script>

<style scoped>
.strategy-log-container {
  /* background-color: #f5f7fa; */
  min-height: 100vh;
  padding: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.el-table .el-table__cell {
  padding: 12px 0;
}
</style>
